<template>
    <div class="sys-log-html">
        <div class="block select-date">
            <span class="select-date-label">选择日期</span>
            <el-date-picker v-model="selectDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" @change="selectDateFunc"></el-date-picker>
        </div>
        <div class="log-info">
            <div class="log-info-item" v-for="item in logData" :key="item.id">
                <div class="item-time">
                    <span class="time">{{ item.time }}</span>
                </div>
                <span class="info">{{item.data}}</span>
            </div>
            <el-empty v-if="!logData.length" description="暂无数据"></el-empty>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.sys-log-html {
    padding: 0.14rem 0.39rem 0 0.44rem;
    height: 100%;
    overflow: hidden;

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
        width: 4.54rem;
    }
    .select-date {
        display: flex;
        align-items: center;
        height: 0.35rem;
        &-label {
            font-size: 0.14rem;
            color: #999;
            margin-right: 0.15rem;
        }
        margin-bottom: 0.18rem;
    }
    .log-info {
        height: 6.12rem;
        padding: 0.24rem 0.13rem;
        background: #ffffff;
        border-radius: 0.02rem 0.02rem 0.02rem 0.02rem;
        border: 0.01rem solid #e5e5e5;
        overflow-y: auto;
        scrollbar-width: thin;
        &-item {
            width: 100%;
            display: flex;
            align-items: center;
            margin-bottom: 0.1rem;
            font-size: 0.14rem;
            color: #303133;
            .item-time {
                width: 1.67rem;
                height: 0.31rem;
                color: #909399;
                background: #f8f8f8;
                margin-right: 0.12rem;
                span {
                    display: inline-block;
                    padding: 0.06rem 0.12rem 0.05rem 0.12rem;
                }
            }
        }
        .el-empty {
            height: 100%;
        }
    }
}
</style>

<script>
// import { getAppdaemonLog } from '@/api/data';
export default {
    name: 'SysLog',
    props: ['logData', 'dateTime'],
    data() {
        return {
            selectDate: '',
        };
    },
    watch: {
        dateTime: {
            handler(newVal) {
                this.selectDate = newVal;
            },
            immediate: true,
            deep: true,
        },
    },
    methods: {
        selectDateFunc() {
            this.$emit('changeDate', this.selectDate);
        },
    },
    mounted() {},
};
</script>
